<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mycss.css"/>
</head>
<body>
<!--Vue.js-->
<script src="/js/vue.js"></script>
<!--Element-ui-->
<script src="/js/index.js"></script>
<!--axios-->
<script src="/js/axios.min.js"></script>
<!--cookie工具-->
<script src="/js/cookie_utils.js"></script>
<!--工具-->
<script src="/js/utils.js"></script>


<div id="container">
    <el-container>
        <!--网站图片 + 用户信息-->
        <el-header height="100%">
            <el-col :span="6">
                <img class="logo" src="/img/server_html/sportLogo.jpg" style="width: 100px;height: 100px"/>
            </el-col>
            <el-col :span="9">
                <span class="campus-sports" style="margin-left: 150px;font-size: 36px;padding-top: 50px">重庆工程学院校园运动会</span>
            </el-col>
            <el-col :span="6" :offset="12" style="display: flex; align-items: center; justify-content: flex-end;">
                <br>
                <!--个人用户信息-->
                <el-dropdown>
                    <span class="no-attention move-bottom-mini-mini" style="font-size: 20px">
                                用户:&nbsp;
                        <el-button type="text"  icon="el-icon-arrow-down" style="font-size: 20px;margin-right: 20px">{{user.username}}</el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <el-button @click="myIndex" style="width: 100px;text-align: center;border: none;font-size: 15px">主页</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item >
                            <el-button @click="myPage" style="width: 100px;text-align: center;border: none;font-size: 15px">个人信息</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="logout" style="width: 100px;text-align: center;border: none;font-size: 15px">注销</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--头像-->
                <el-col :span="6" :offset="0">
                    <el-avatar :src="user.userHeadUrl"></el-avatar>
                </el-col>
            </el-col>
        </el-header>

        <el-main>
            <el-col :span="10" :offset="3">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="position: relative; left: 36%">
                        <span>{{title[parseInt(this.userType)]}}</span>
                    </div>
                    <div>
                        <template>
                            <el-select v-model="projectIndex" filterable placeholder="请选择比赛项目" @change="changeProject">
                                <el-option v-for="(project, index) in projects"
                                           :label="project.projectName"
                                            :key="index"
                                            :value="index">
                                </el-option>
                            </el-select>
                        </template>

                        <template v-if="projectIndex.length != 0">
                            <div class="text item">
                                <br>
                                <el-tag>项目编号</el-tag>
                                {{projectNumber}}
                                <br>
                                <br>
                                <el-tag>项目名</el-tag>
                                {{projectName}}
                                <br>
                                <br>
                                <el-tag>项目介绍</el-tag>
                                {{projectIntroduction}}
                                <br>
                                <br>


                                <el-tag>项目类型</el-tag>
                                <template v-if="projectType == 0">
                                    个人赛
                                </template>
                                <template v-else-if="projectType == 1 && this.userType !=2 ">
                                    团体赛
                                    <el-tag>参赛队伍</el-tag>
                                    <el-select v-model="teamId1"  placeholder="请选择">
                                        <el-option
                                                v-for="item in teams"
                                                :key="item.teamId"
                                                :label="item.number"
                                                :value="item.teamId">
                                        </el-option>
                                    </el-select>
                                </template>
                                <template v-else>

                                </template>


                                <br>
                                <br>
                                <el-tag>项目招收人数/队数</el-tag>
                                {{projectNeedNum}}
                                <br>
                                <br>
                                <el-tag>招收裁判员人数</el-tag>
                                {{projectNeedReNum}}
                                <br>
                                <br>

                                <el-tag>比赛时间</el-tag>
                                {{arrangeInfoTime}}

                                <br>
                                <br>
                                <el-tag>比赛地点</el-tag>
                                {{arrangeInfoPlace}}
                                <br>
                                <br>
                                <el-tag>其他说明内容</el-tag>
                                {{arrangeInfoContent}}
                            </div>

                            <br>
                            <br>
                            <el-col :offset="9">
                                <el-button type="primary" @click="onSubmit">
                                    申请报名
                                </el-button>
                                <br>
                                <br>
                            </el-col>


                        </template>

                    </div>
                </el-card>
            </el-col>
            <el-cpl el-col :span="10" :offset="1" :push="22">
            <el-right>

                <template style="width: 20%" >
                    <h1 >管理队伍</h1>
                    <el-button type="primary"   @click="createTime()">新建队伍</el-button>
                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">


                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="队伍名称">
                            <el-input v-model="form.teamName"></el-input>
                        </el-form-item>
                        <el-form-item label="队伍队员">
                            <el-select v-model="students2" multiple placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.studentId"
                                        :label="item.name"
                                        :value="item.studentId">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="createCancel()">取 消</el-button>
                            <el-button type="primary" @click="createSubmit()">确 定</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>
                    <el-table
                            :data="tableData"
                            height="250"
                            border
                            style="width: 40%">
                        <el-table-column
                                prop="teamLeader"
                                label="队长"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="team.number"
                                label="队伍名称"
                                width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

        </el-right>
            </el-cpl>
        </el-main>



        <el-footer class="foot">
            <br>
            <br>
            &copy;2023 by 第三组
        </el-footer>
    </el-container>


</div>

<script>
    //登录验证
    if (getCookieValue("token") == null || getCookieValue("token") === '') {
        window.location.href = baseUrl + 'system/toLogin?reason=nologin';
    }
</script>

<script>
    var baseUrl = "http://localhost:8080/client";
    var vm = new Vue({
        el: '#container',
        data: {
            user: {
                userId: '',
                username: '',
                userHeadUrl: '',
                token: '',
            },

            title: ['运动员报名窗口', '', '裁判员报名窗口'],

            projects: [],
            projectName: '',

            value: '',

            projectIndex: '',

            arrangeInfoContent: '',
            arrangeInfoPlace: '',
            arrangeInfoTime: '',
            projectIntroduction: '',
            projectName: '',
            projectNeedNum: '',
            projectNeedReNum: '',
            projectNumber: '',
            projectType: '',
            projectGType: '',

            projectId: '',
            arrangeInfoId: '',

            userType: '',
            typeId:'',

            students:[],
            students2:[],

            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            options: [{
                studentId: '选项1',
                name: '黄金糕'
            }, {
                studentId: '选项2',
                name: '双皮奶'
            }, {
                studentId: '选项3',
                name: '蚵仔煎'
            },],
            value1: [],
            //对话框
            dialogFormVisible: false,
            //创建队伍
            form: {
                teamName: '',
                students: [],

            },
            teamInfos:[],
            teams:[],
            teamId1:''

        },


        // created: function () {
        //     this.user.userId = getCookieValue("userId");
        //     this.user.username = getCookieValue("username");
        //     this.user.userHeadUrl = '/img/user_upload/' + getCookieValue("img");
        //     this.userType = getCookieValue("type");
        //     this.typeId = getCookieValue("typeId");
        //     // console.log(this.projectIndex);
        //     // console.log(parseInt(this.userType));
        //     // console.log(this.userType);
        //     axios.get(baseUrl + "/signup").then((res)=>{
        //         // console.log(res.data);
        //         this.projects = res.data.data;
        //         // console.log(this.projects);
        //     });
        // },
        // created: function () {
        //     this.user.token = getCookieValue("token");
        //     var param = window.location.href.split("?");
        //     if (param[1] === 'reason=successlogin') {
        //         this.$notify({
        //             title: '登录成功',
        //             message: '欢迎您',
        //             type: 'success'
        //         });
        //     }
        //     axios({
        //         method: 'get',
        //         url: baseUrl + '/user/getLoginUserInfo' + '/' + this.user.token,
        //         header: {
        //             token : this.user.token
        //         }
        //     }).then((res)=>{
        //         this.user.userId = res.data.data.userId;
        //         this.user.username = res.data.data.username;
        //         this.user.gender = res.data.data.gender;
        //         this.user.userHeadUrl = '/img/user_upload/' + res.data.data.img;
        //         this.userType = res.data.data.type
        //         this.typeId = res.data.data.typeId
        //         console.log(this.userType)
        //         console.log(this.typeId)
        //     });
        // },
        mounted(){
            // this.function();
            // this.selectStudents();
            // this.selectTeam();
        },
        created(){
            this.function();
            // this.selectStudents();
            // this.selectTeam();
        },

        methods: {
            function () {
                this.user.token = getCookieValue("token");
                var param = window.location.href.split("?");
                if (param[1] === 'reason=successlogin') {
                    this.$notify({
                        title: '登录成功',
                        message: '欢迎您',
                        type: 'success'
                    });
                }
                axios({
                    method: 'get',
                    url: baseUrl + '/user/getLoginUserInfo' + '/' + this.user.token,
                    header: {
                        token: this.user.token
                    }
                }).then((res) => {
                    this.user.userId = res.data.data.userId;
                    this.user.username = res.data.data.username;
                    this.user.gender = res.data.data.gender;
                    this.user.userHeadUrl = '/img/user_upload/' + res.data.data.img;
                    this.userType = res.data.data.type
                    this.typeId = res.data.data.typeId
                    console.log(this.userType)
                    console.log(this.typeId)
                    this.selectTeam();
                    this.selectStudents();
                        axios.get(baseUrl + "/system/signup").then((res)=>{
                                    // console.log(res.data);
                                    this.projects = res.data.data;
                                    // console.log(this.projects);
                                });
                })
            },
            selectTeam(){
                console.log(this.userType)
                console.log(this.typeId)
                axios({
                    method:"get",
                    url:baseUrl + "/system/selectTeamByStudentId/" + this.typeId
                }).then((res)=>{
                    this.tableData = res.data.data
                    this.teamInfos = res.data.data
                    this.teams.length = 0;
                    this.teamInfos.forEach((value,index,array)=>{
                        console.log(value.team.teamId)
                        console.log("<<<<<<<<<<<<<")
                        this.teams.push(value.team)
                    })
                    console.log(this.teams)
                })
            },
            selectStudents(){
                axios({
                    method:"get",
                    url: baseUrl + "/system/selectStudent/" + this.typeId
                }).then((res)=>{
                    this.options = res.data.data
                    this.options.forEach((value,index,array)=>{
                        if (value.studentId == this.typeId)
                            array.splice(index,1);
                    })

                })
            },
            createCancel(){
                this.students2.length = 0;
                this.teamId1 = ''
                this.dialogFormVisible = false;

            },
            createSubmit(){
                var arr = this.students.concat(this.students2);
                console.log(arr)
                // this.from.students = arr;
                axios({
                    method: 'post',
                    url: baseUrl + "/system/team",
                    data: {
                        teamName: this.form.teamName,
                        students: arr
                    }
                }).then((res) =>{
                    console.log(res.data.code)
                    if(res.data.code == 10000){
                        this.$message("新建队伍成功");
                        this.selectTeam();
                    }else if(res.data.msg == "队伍性别不一致"){
                        this.$message("队伍性别不一致");
                    }else {
                        this.$message("新建队伍失败");
                    }
                })
                this.students2.length = 0;
                this.teamId1 = ''
                this.dialogFormVisible = false;
            },
            createTime(){
                this.students.length = 0;
                this.students.push(this.typeId)
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
                axios({
                    method: "delete",
                    url: baseUrl + "/system/deleteTeam",
                    data: {
                        typeId:this.typeId,
                        teamId: row.teamId
                    }
                }).finally((res)=>{
                    this.selectTeam();
                })

            },
            changeProject(index) {
                // console.log(this.projects);
                // var index = event.srcElement.dataset.index;
                // console.log(index);
                // console.log(event.srcElement.dataset.num);

                this.projectNumber = this.projects[this.projectIndex].projectNumber;
                this.projectName = this.projects[this.projectIndex].projectName;
                this.projectNeedNum = this.projects[this.projectIndex].projectNeedNum;
                this.projectNeedReNum = this.projects[this.projectIndex].projectNeedReNum;
                this.projectIntroduction = this.projects[this.projectIndex].projectIntroduction;
                this.projectType = this.projects[this.projectIndex].projectType;
                this.projectGType = this.projects[this.projectIndex].projectGType;
                this.arrangeInfoContent = this.projects[this.projectIndex].arrangeInfoContent;
                this.arrangeInfoPlace = this.projects[this.projectIndex].arrangeInfoPlace;
                this.arrangeInfoTime = timeChange(this.projects[this.projectIndex].arrangeInfoTime);


                this.projectId = this.projects[this.projectIndex].projectId;
                this.arrangeInfoId = this.projects[this.projectIndex].arrangeInfoId;

                // var artime = this.arrangeInfoTime;
                // var nowtime = timeChange(new Date());

                // var artime = new Date(this.arrangeInfoTime);
                // var nowtime = new Date();
                // console.log(artime)
                // console.log(nowtime)
                // console.log(artime > nowtime)
            },

            onSubmit() {
                //输入校验

                var artime = new Date(this.arrangeInfoTime);
                var nowtime = new Date();
                if (nowtime > artime) {
                    this.$alert('比赛时间已过', '报名失败', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                var gender = this.user.gender;
                var type = this.userType;
                if (gender != this.projectGType && type == '0') { // 只校验学生性别
                    this.$alert('请确认您的性别是否与比赛要求一致', '报名失败', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                var id =this.typeId;
                if(this.projectType == 1 && this.userType !=2) id = this.teamId1
                axios({
                    method: 'post',
                    url: baseUrl + "/system/sign",
                    data: {
                        projectId: this.projectId,
                        projectType: this.projectType,
                        arrangeInfoId: this.arrangeInfoId,
                        typeId: id,
                        type: this.userType,
                        typeId2: this.typeId
                    }
                }).then((res)=>{
                    // console.log(res.data);
                    if (res.data.msg == 'yibaoming') {
                        //之前已报名
                        this.$alert('原因：之前已报名', '报名失败', {
                            confirmButtonText: '确定',
                        });
                    }else if (res.data.msg == 'yibaomingmanle') {
                        //之前已报名
                        this.$alert('原因：比赛已经报名满了', '报名失败', {
                            confirmButtonText: '确定',
                        });
                    }else if (res.data.msg == '你不是这队组长没权限') {
                        //之前已报名
                        this.$alert('原因：你不是这队组长没权限', '报名失败', {
                            confirmButtonText: '确定',
                        });
                    }
                    else if (res.data.msg = 'success') {
                        //报名成功
                        this.$alert('可前往信息查询页面，查询报名详情', '报名成功', {
                            confirmButtonText: '确定',
                        });
                    } else {
                        //报名失败
                        this.$alert('原因：未知错误', '报名失败', {
                            confirmButtonText: '确定',
                        });
                    }
                });
            },
            myIndex() {
                window.location.href = baseUrl + "/system/toIndex";
            },
            myPage() {
                window.location.href = baseUrl + "/system/toMyInfo";
            },
            logout() {
                axios({
                    method: 'post',
                    url: baseUrl + '/user/logout',
                    data: {
                        token: this.user.token,
                    },
                }).then((res)=>{
                    setCookieValue("token", "");
                    window.location.href = baseUrl + '/system/toLogin'
                });
            },
        }
    });
</script>
</body>
</html>
